<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>用户登录</title>
	<link rel="stylesheet"  href="css/jquery.mobile-1.2.0.css" />
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile-1.2.0.js"></script>
	<script type="text/javascript">
		//定义错误信息
		var loginStatusInfos = [];   
		loginStatusInfos[10000] = "登录成功";
		loginStatusInfos[10003] = "密码错误";
		loginStatusInfos[10004] = "未知客户端错误";
		loginStatusInfos[10005] = "网络错误";
		
		//登录调用
		function LoginCallBack(statusInfo,statusCode,Id){
			//statusInfo 成功与否返回,boolean
			//loginStatus  失败成功返回值
			//Id 成功返回的用户ID
			hideLoader();
			if(statusInfo){//登陆成功
				window.JsGameCenter.closeWebView();
			}else{//登录失败
				//window.location.href = "login_error.html";
			}
		}
	</script>
	<script type="text/javascript">
		$(function(){
			$("#backGame").click(function(){
				window.JsGameCenter.closeWebView();
			});
			
			//登录
			$("#uLogin").click(function(){
				var account_no = $("#account_no").val();
				var password = $("#password").val();
				if(!checkLoginData()){
					return false;
				}
				//登录请求
				try {
					window.JsGameCenter.login(account_no,password);
					showLoader("正在登录,请稍后...");
				} catch(e) {
					LoginCallBack(0,10004,account_no);
				}
			});
			
			//生成6位随机数字字符串
			function generateRandomStr(){
				var randomStr = Math.random();
				randomStr = randomStr.toString();
				return randomStr.substring(2,8);
			}
			
			//快速登录[注册]
			$("#uRegister").click(function(){
				var account_no = $("#account_no").val();
				var password = $("#password").val();
				
				if(account_no == ""){//账号为空
					account_no = generateRandomStr();
				}
				if(password == ""){//密码为空
					password = generateRandomStr();
				}
				
				//登录请求
				try {
					window.JsGameCenter.register(account_no,password);
					showLoader("正在注册,请稍后...");				
				} catch(e){
					LoginCallBack(0,10004,account_no);
				}
			});
		});
		
		function closePopup(eleStr){
			$(eleStr).popup("close")
		}
		
		//验证表单
		function checkLoginData(){
			if($("#account_no").val().replace(/(^\s*)|(\s*$)/g, "")==""){
				$("#account_popup").popup("open");
				setTimeout("closePopup('#account_popup')",2000);
				return false;
			}
			if(/\D/.test($("#account_no").val())){
				$("#Wraccount_popup1").popup("open");
				setTimeout("closePopup('#Wraccount_popup1')",2000);
				return false;
			}
			if($("#account_no").val().length < 6){
				$("#Wraccount_popup2").popup("open");
				setTimeout("closePopup('#Wraccount_popup2')",2000);
				return false;
			}
			if($("#password").val().replace(/(^\s*)|(\s*$)/g, "")==""){
				$("#password_popup").popup("open");
				setTimeout("closePopup('#password_popup')",2000);
				return false;
			}
			return true;
		}
		</script>
		<script type="text/javascript">
		//显示加载器
		function showLoader(str) {
			$.mobile.loading('show', {
				text: str, 			//加载器中显示的文字
				textVisible: true, //是否显示文字
				theme: 'a',         //加载器主题样式a-e
				textonly: false,   //是否只显示文字
				html: ""             //要显示的html内容，如图片等
			});
		}
	
		//隐藏加载器
		function hideLoader(){
			$.mobile.loading('hide');
		}
	</script>
</head>
<body>
<div data-role="page" data-theme="f">
	<div data-role="header" data-theme="b" data-position="fixed" >
		<div data-role="header" data-theme="b">
			<h1>用户登录</h1>
		</div>
	</div>
	<div data-role="content">
		<div id="loginContent">
			<form id="form">
				<label for="account_no">账号：</label>
			      <input maxlength="100"  placeholder ="输入账号" type="text"  value="" name="account_no" id="account_no" class="formtext" />
			    </p>
			    <label for="password">密码：</label>
			      <input maxlength="20"  placeholder="输入密码" type="password"   name="password" id="password" value=""  class="formtext" />
			    </p>
			    <div class="ui-grid-a">
			    	<div class="ui-block-a">
				          <input type="button" id='uLogin' value="登  录"  data-theme="b" >
			    	</div>
			    	<div class="ui-block-b">
			          	<input type="button" id='uRegister' value="快速注册"  data-theme="b">
			    	</div>
			    </div>
		    </form>
		 </div>
	</div>
	<div data-role="popup" id="account_popup" class="ui-content" data-theme="e" style="max-width:350px;">
          <p>请输入您的账号</p>
	</div>
	<div data-role="popup" id="password_popup" class="ui-content" data-theme="e" style="max-width:350px;">
          <p>请输入您的密码</p>
	</div>
	<div data-role="popup" id="Wraccount_popup1" class="ui-content" data-theme="e" style="max-width:350px;">
          <p>用户账号只能是数字</p>
	</div>
	<div data-role="popup" id="Wraccount_popup2" class="ui-content" data-theme="e" style="max-width:350px;">
          <p>用户账号至少为6位</p>
	</div>
</div>
</body>
</html>
